import React, {Component} from 'react';
import {connect} from "react-redux";
import {withRouter} from 'react-router-dom'
import {Button, Form, Input, Space, message, Modal} from "antd";

import {login,register,testSend} from "../../API/API";
import {createAddUserInfoAction} from "../../redux/user/user_action";
import './index.css'

// todo 这需要一些额外的配置，再说。整个花的，装饰器语法，高阶函数用起来太恶心了，所以es6引入了装饰器语法
class Login extends Component {
    state = {
        isShow: false
    }
    //登录按钮
    login = async (value) => {
        const {data} = await login(value)
        console.log(value)
        if (data.status === "200") {
            //登录成功往redux里面放入token和用户信息，这里封装成一个对象
            const userInfo = {token: data.token, username: value.username}
            //往redux里面放
            this.props.saveUserInfo(userInfo)
            //提示
            message.success('登录成功')
            //页面跳转到main
            this.props.history.replace('/main')
        } else if (data.status === "999") {
            message.error(data.info)
        } else {
            message.error('未知错误，请联系管理员')
        }
    }

    //注册用户
    regUser = async (value)=>{
        const {data} = await register(value)
        console.log(data)
        if (data.status === '999'){
            message.error(data.info)
        }else {
            message.success('注册成功，请登录')
            this.props.history.replace('/main')
        }
    }

    //判断token是否过期
    tokenIsOutDate = async ()=>{
        const {data} = await testSend()
        return data !== '200';
    }

    componentDidMount() {
        //判断是否登录，如果登录了就不能再次登录了
        if (this.props.isLogin){
            //判断token是否过期了 这里判断草率了
            if (this.tokenIsOutDate){
                //token失效
            }
            this.props.history.replace('/main')
        }
    }

    render() {
        const {isShow} = this.state
        return (
            <div className={'login'}>
                <div className={'formBox'}>
                    <span className='h2'>Login</span>
                    <Form
                        labelCol={{span: 6}}
                        wrapperCol={{span: 16}}
                        onFinish={this.login}
                    >
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[{required: true, message: '请输入用户名'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{required: true, message: '请输入密码'}]}
                        >
                            <Input.Password/>
                        </Form.Item>

                        <Form.Item wrapperCol={{offset: 6}}>
                            <Space size={100}>
                                <Button type="primary" htmlType="submit">
                                    登录
                                </Button>
                                <Button type="primary" onClick={() => this.setState({isShow: true})}>
                                    注册
                                </Button>
                            </Space>
                        </Form.Item>
                    </Form>
                </div>

                <Modal
                    destroyOnClose
                    maskClosable={false}
                    onOk={()=>this.regForeRef.submit()}
                    cancelText={'取消'}
                    okText={'注册'}
                    title="注册用户"
                    visible={isShow}
                    onCancel={() => this.setState({isShow: false})}
                >
                    <Form ref={c=>this.regForeRef = c}
                          onFinish={this.regUser}
                          labelCol={{span: 6}}
                          wrapperCol={{span: 12}}>
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[{required: true, message: '请输入用户名'}]}>
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{required: true, message: '密码'}]}>
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label={'手机号'}
                            name={'telNumber'}
                            rules={[{required: true, message: '手机号'}]}>
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label={'邮箱'}
                            name={'email'}>
                            <Input/>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}

export default connect((state) => {
    return {isLogin:state.userInfo.isLogin}
}, {
    saveUserInfo: createAddUserInfoAction
})(withRouter(Login))